<template>
  <div class="iCountUp" style="margin:0 auto;">
    <ICountUp
      :start-val="startVal"
      :end-val="endVal"
      :decimals="decimals"
      :duration="duration"
      :options="options"
      @ready="onReady"
    />
  </div>
</template>

<script>
import { CrawlProductCount } from '@/api/erp/crawlproduct'
import ICountUp from 'vue-countup-v2'

// import qs from 'qs'

export default {
  name: 'Countup',
  components: {
    ICountUp
  },
  data() {
    return {
      timer: '',
      startVal: 0,
      endVal: 155100,
      decimals: 0,
      duration: 1,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: ''

      }
    }
  },
  mounted() {
    this.timer = setInterval(this.productCount, 10000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    onReady: function(instance, CountUp) {
      const that = this
      instance.update(that.endVal)
    },
    productCount() {
      CrawlProductCount(0, null).then(response => {
        if (this.endVal !== response.count) {
          this.startVal = this.endVal
          this.endVal = response.count
        }
      })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    }
  }
}
</script>

<style scoped>
  .iCountUp {
    font-size: 12em;
    color: #4d63bc;
  }
</style>

